<script setup lang="ts">
import { Bell } from '@element-plus/icons-vue';
import { useMoneyStore } from '@/store/money';
import { useRouter } from 'vue-router';
import { ref } from 'vue';
const money = useMoneyStore()
const route = useRouter()
const Window: any = window
const schedule = ref(0)
const disabled = ref(false)
const startT2 = () => {
    const timer = setInterval(async () => {
        schedule.value++
        if (schedule.value === 100) {
            clearInterval(timer)
            Window.app.stopScan()
            await Window.app.showDetect()
            disabled.value = false
            route.push('/detect')
        }
    }, 100)
}
const startT1 = () => {
    const timer = setInterval(() => {
        schedule.value++
        if (schedule.value === 90) {
            clearInterval(timer)
            setTimeout(() => {
                startT2()
            }, 2000)
        }
    }, 50)
}
const start = async () => {
    if (money.money < 10) {
        await Window.app.noMoney()
        console.log('aaa')
        route.push('/rec')
    }
    else {
        disabled.value = true
        money.setMoney(money.money - 10)
        Window.app.scanDisk()
        startT1()
    }
}
</script>
<template>
    <div class="money">
        <el-text class="money">可用余额：{{ money.money }}￥</el-text>
        <div style="margin-top: 10px;">
            <el-button type="primary" @click="route.push('/rec')">去充值</el-button>
            <el-button type="success" @click="route.push('/about')">关于</el-button>
        </div>
    </div>
    <h1 class="title">检测电脑是否关机</h1>
    <div class="buttonGroup">
        <el-button :icon="Bell" type="warning" @click="start" :disabled="disabled">
            开始检测(10元/次)
        </el-button>
    </div>
    <div class="progress">
        <el-progress :percentage="schedule" :stroke-width="15" striped striped-flow :duration="15" />
    </div>

</template>
<style scoped>
.title {
    margin-top: 20px;
    text-align: center;
}

.money {
    margin-top: 10px;
    margin-left: 10px;
}

.buttonGroup {
    margin-top: 40px;
    text-align: center;
}

.buttonGroup .el-button {
    height: 60px;
    font-size: 16px;
    font-weight: 700;
}

.progress {
    margin-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
}
</style>